<template>
  <div class="tech-card" :class="{ 'card-hover': hover }">
    <div class="card-icon">
      <i :class="icon"></i>
    </div>
    <div class="card-content">
      <h3>{{ title }}</h3>
      <p>{{ description }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TechCard',
  props: {
    title: {
      type: String,
      required: true
    },
    description: {
      type: String,
      required: true
    },
    icon: {
      type: String,
      required: true
    },
    hover: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style scoped>
.tech-card {
  background: linear-gradient(145deg, #1a2233, #1e293c);
  border-radius: 12px;
  padding: 25px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.25);
}

.card-icon {
  margin-bottom: 20px;
  font-size: 2.5rem;
  color: #4caf93;
}

.card-content h3 {
  color: #ffffff;
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.card-content p {
  color: #a0aec0;
  line-height: 1.6;
}
</style> 